﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0030)http://localhost:8080/House-2/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
    <TITLE>云和租房 - 首页</TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK rel=stylesheet type=text/css href="../css/style.css">
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
    <script type="text/javascript" src="/scripts/jquery-1.8.3.js"></script>
    <style type="text/css">
        .selectfather {
            width: 400px;
            float: right;
            position: relative;
            right: 30px;
        }

        .select {
            width: 400px;
            display: flex;
            justify-content: space-between;
        }

        #choose{
            width: 400px;
        }
        #choose span{
            display: inline-block;
            margin-right: 10px;
            height: 18px;
            background-color: aquamarine;
        }
    </style>

</HEAD>

<BODY>
<DIV id=header class=wrap>
    <DIV id=logo>
        <IMG src="../images/logo.gif">
    </DIV>
</DIV>
<DIV id=navbar class=wrap>
    <DL class="search clearfix">
        <FORM id=sform method=post action=search.action>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=title> <LABEL class=ui-blue><INPUT onclick=doSearch()
                                                                                               value=搜索房屋 type=button
                                                                                               name=search></LABEL>
                    </LI>
                </UL>
            </DT>

            <div class="selectfather">
                <div id="choose">
                    条件:
                </div>
                <div class="select">
                    <span class=first>价格:</span>
                    <a href="javascript:void(0)">100元以下</a>
                    <a href="javascript:void(0)">100元—200元</a>
                    <a href="javascript:void(0)">200元以上</a>
                </div>

                <div class="select">
                    <span class=first>房屋位置:</span>
                    <a href="javascript:void(0)">知春路</a>
                    <a href="javascript:void(0)">中关村大街</a>
                    <a href="javascript:void(0)">学院路</a>
                    <a href="javascript:void(0)">朝阳路</a>
                </div>

                <div class="select">
                    <span class=first>房型:</span>
                    <a href="javascript:void(0)">一室一厅<input type="hidden" value="1"></a>
                    <a href="javascript:void(0)">一室两厅<input type="hidden" value="2"></a>
                    <a href="javascript:void(0)">两室一厅<input type="hidden" value="3"></a>
                    <a href="javascript:void(0)">两室两厅<input type="hidden" value="4"></a>
                </div>

                <div class="select">
                    <span class=first>面积:</span>
                    <a href="javascript:void(0)">40以下</a>
                    <a href="javascript:void(0)">40-500</a>
                    <a href="javascript:void(0)">500以上</a>
                </div>
            </div>
        </FORM>
    </DL>
</DIV>
<DIV class="main wrap">
    <TABLE class=house-list>
        <TBODY id="tab">

        <TR>无租房信息</TR>
        </TBODY>
    </TABLE>
    <DIV class=pager>
        <UL>
            <LI class=current>
                <A href="#">首页</A>
            </LI>
            <LI>
                <A href="#">上一页</A>
            </LI>
            <LI>
                <A href="#">下一页</A>
            </LI>
            <LI>
                <A href="#">末页</A>
            </LI>
        </UL>
        <SPAN class=total>1/2页</SPAN></DIV>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>

    </DL>
</DIV>
</BODY>
<script>

    /*选择条件*/
    $(".select a").click(function () {
        var str="<span class='ch'>"+$(this).text()+"×</span>";
        $("#choose").html($("#choose").html()+str);

        /*条件消失*/
        $(this).parent().css("display","none");



        searchHouse($(this).find("input").val());

    });

    /*取消条件*/
    $(".ch").live("click",function () {
        /*获取字符串*/
        var text=$(this).text().substring(0,$(this).text().length-1);
        $(".select a").each(function (i,n) {
            if ($(n).text() == text){
                $(n).parent().css("display","flex");
            }
        });
        /*移除条件*/
       $(this).remove();
    });

$(function () {
    searchHouse("");
});
    function searchHouse(type) {
        $.ajax({
            url:"searchHouse",
            type:"POST",
            data:{
                tid:type
            },
            dataType:"json",
            success:function (data) {
                $("#tab").html("");
                var str="";
                $(data).each(function (i,n) {
                    str+="<TR>\n" +
                            "<TD class=house-thumb>" +
                                "<span>" +
                                    "<a href=\"details.htm\" target=\"_blank\">" +
                                        "<img src=\"../images/thumb_house.gif\" width=\"100\" height=\"75\"\n alt=\"\">" +
                                    "</a>" +
                                "</span>" +
                            "</TD>\n" +
                            "<TD>\n" +
                                "<DL>\n" +
                                    "<DT><A href=\"details.htm\" target=\"_blank\">"+n.title+"</A></DT>\n" +
                                    "<DD>"+n.street.district.dname+""+n.street.sname+","+n.floorage+"平米\n" +
                                    "<BR>联系方式："+n.tel+"\n" +
                                    "</DD>\n" +
                                "</DL>\n" +
                            "</TD>\n" +
                            "<TD class=house-type>"+n.type.tname+"</TD>\n" +
                            "<TD class=house-price>\n" +
                                "<SPAN>"+n.price+"</SPAN>元/月\n" +
                            "</TD>\n" +
                        "</TR>";
                })
                $("#tab").html(str);
            }
        })
    }

</script>
</HTML>